<template>
  <div>
    <div class="indBox">
      <!--用电数据，能耗占比-->
      <div class="box abxo2">
        <div class="flexOne">
          <el-card>
            <div class="echOne">用电数据</div>
            <div class="echCom">
              <p>
                能耗：
                <el-select v-model="value" style="width: 110px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </p>
              <div class="ms">
                <p>
                  当年（去年）<span class="pFont">2,560,080</span
                  ><span class="ps">(2,235,080)</span>
                </p>
                <p>
                  当月（去年同月）<span class="pFont">123,080</span>
                  <span class="ps">(1,080)</span>
                </p>
              </div>
              <p>
                当日（昨日）<span class="pFont">500</span
                ><span class="ps">(500)</span>
              </p>
              <div class="gl">
                <p>功率 <span style="margin-left: 15px">kw</span></p>
                <div class="end">
                  <p>实时 <span class="pFont">32</span></p>
                  <p>
                    历史最高 <span class="pFont">136</span
                    ><span class="ps"
                      >(时间：<span class="pt">22-01-12</span>)</span
                    >
                  </p>
                  <p>
                    本年最高 <span class="pFont">64</span
                    ><span class="ps"
                      >(时间：<span class="pt">22-01-12</span>)</span
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="tt">
              <el-select
                v-model="select"
                placeholder="Select"
                style="width: 115px">
                <el-option label="总体" value="总体" />
              </el-select>

              <el-select
                v-model="value1"
                placeholder="请选择"
                style="width: 115px" >
                <el-option v-for="item in options" :key="item.value"
                      :label="item.label"
                      :value="item.value" />
              </el-select>

              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="margin: 0 20px"
                @change="handleElector"
              />
            </div>
            <div id="main" style="height: 300px"></div>
          </el-card>
        </div>
        <div class="flexTwo">
          <el-card style="height: 100%">
            <div class="echOne">能耗占比</div>
            <div class="two">
              <div id="two" style="height: 250px"></div>
              <div class="input_t">
                <el-date-picker
                  v-model="time1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 250px; margin: 0 20px"
                />
              </div>
            </div>
            <div style="display: flex">
              <div class="threeBox">
                <div id="three" style="height: 310px"></div>
                <div class="qn">去年</div>
                <div class="sy">上月</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!--碳排放，用能强度-->
      <div class="box abxo2">
        <div class="flexOne">
          <el-card>
            <div class="echOne">碳排放</div>
            <div class="tpf">
              <div class="tpf1">
                <div class="tf1">
                  <div>
                    <div>碳中和成本</div>
                    <div><span>30,000</span>RMB/年</div>
                  </div>
                  <div>
                    <div>购买绿色成本</div>
                    <div><span>30,000</span>RMB/年</div>
                  </div>
                </div>
              </div>
              <div class="tpf2">
                <div id="four" style="height: 250px"></div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="flexTwo">
          <el-card style="height: 309px">
            <div
              class="echOne"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              用能强度
              <el-select v-model="select1" style="width: 115px">
                <el-option label="kWh/m²" value="kWh/m²" />
                <el-option label="RMB/m²" value="RMB/m²" />
                <el-option label="tce/m²" value="tce/m²" />
              </el-select>
            </div>
            <div>
              <div id="five" style="height: 240px"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--用电平衡-->
    <div class="box_two">
      <el-card>
        <div class="echOne">用电平衡</div>
        <div class="zz">
          <div class="tpf1" style="margin-left: 30px">
            <div class="tf1">
              <div>
                <div>区域总电耗（过去一年累计）</div>
                <div><span>2,560,080</span>kWh</div>
              </div>

              <div>
                <div>区域分项电耗加总（过去一年累计）</div>

                <div><span>123,080</span>kWh</div>
              </div>
            </div>
          </div>
          <div class="b">
            <div class="c">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="margin: 0 20px"
              />
            </div>
            <div id="six" style="height: 250px"></div>
          </div>
        </div>
      </el-card>
    </div>
    <!--燃气数据-->
    <div class="box_two">
      <el-card>
        <div class="echOne">燃气数据</div>
        <div class="zz">
          <div class="asss">
            <div class="end_font">
              <div>
                <div></div>
                <div>
                  燃气：
                  <el-select
                    v-model="select2"
                    placeholder="请选择"
                    style="width: 115px"
                    size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                  </el-select>
                </div>
              </div>

              <div>
                <div>当年（去年）</div>
                <div>
                  <span class="spanOne m">2,560,080</span>
                  <span class="spanTwo">（2,235,080）</span>
                </div>
              </div>

              <div>
                <div>当月（去年同月）</div>

                <div>
                  <span class="spanOne n">123,080</span>
                  <span class="spanTwo">（1,080）</span>
                </div>
              </div>

              <div>
                <div>当日（昨日）</div>
                <div>
                  <span class="spanOne v">580</span>
                  <span class="spanTwo">（500）</span>
                </div>
              </div>
            </div>
          </div>
          <div class="b">
            <div class="c">
              <el-select
                v-model="end_value"
                placeholder="Select"
                style="width: 115px">
                <el-option label="总体" value="总体" />
              </el-select>

              <el-select
                v-model="end_select"
                placeholder="Select"
                style="width: 115px" >
              </el-select>

              <el-date-picker
                v-model="time2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="margin: 0 20px" />
            </div>
            <div id="seven" style="height: 250px"></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,watch } from "vue";
import { ProjectGroupone } from "@/api/model/echarts";
import * as echarts from "echarts";

const value = ref("kwh");
const value1 = ref("kwh");
const select = ref("总体");
const time = ref("");

const time1 = ref("");
const time2 = ref("");
const select1 = ref("kWh/m²");
const select2 = ref("m²");
const end_value = ref("总体");
const end_select = ref("m²");

// let state = reactive({
// 	startTime: "",
// 	endTime: ""
// })

const options = [
  {
    value: "kWh",
    label: "kWh",
  },
  {
    value: "RMB",
    label: "RMB",
  },
  {
    value: "tce",
    label: "tce",
  },
  {
    value: "kgco2",
    label: "kgco2",
  },
];

onMounted(() => {
  getYongdian();//用电

  getNengHao();//能耗

  getPingHeng();//平衡

  getRanQi();//燃气

  getTanPai();//碳排放

  getQiangDu();
});

// 用电数据表
const getYongdian = async () => {
  let obj = {
    dataType: "day",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "用电数据",
    thirdType: "",
    type: "day",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let res = await ProjectGroupone(obj);
  console.log('用电数据',res)

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "能耗",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};

// 能耗占比
const getNengHao = async () => {
  let obj = {
    dataType: "day",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "用能强度",
    thirdType: "",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let electrox3 = []; // 第二条线
  let electrox4 = []; // 第二条线
  let electrox5 = []; // 第二条线

  let res = await ProjectGroupone(obj);
  console.log(res, "能耗？");

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      } else if (item.type == "type3") {
        electrox3.push(item.number1);
      } else if (item.type == "type4") {
        electrox4.push(item.number1);
      } else if (item.type == "type5") {
        electrox5.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let chartDom = echarts.init(document.getElementById("two"));
    let chartDom3 = echarts.init(document.getElementById("three"));
    chartDom.setOption({
      legend: {
        data: ["制冷机", "冷却水泵", "冷冻水泵", "冷却塔风机", "热水泵"],
        left: 200,
        top: 15,
        itemWidth: 15,
        itemHeight: 1,
      },
      xAxis: {
        name: "日",
        // boundaryGap: true,
        data: data1,
      },
      yAxis: {
        name: "%",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          name: "制冷机",
          type: "line",
          stack: "Total",
          data: electrox1,
          color: "#D90909",
        },
        {
          name: "冷却水泵",
          type: "line",
          stack: "Total",
          data: electrox2,
          color: "#FFC40F",
        },
        {
          name: "冷冻水泵",
          type: "line",
          stack: "Total",
          data: electrox3,
          color: "#e2e3e3",
        },
        {
          name: "冷却塔风机",
          type: "line",
          stack: "Total",
          data: electrox4,
          color: "#A7DDFF",
        },
        {
          name: "热水泵",
          type: "line",
          stack: "Total",
          data: electrox5,
        },
      ],
    });

    chartDom3.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
      },
      legend: {
        bottom: "0",
      },
      series: [
        {
          type: "pie",
          center: ["25%", "50%"],
          radius: [40, 75],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            fontSize: "15",
            color: "inherit",
            formatter: `{b}{d}%` /*饼状图触碰之后显示的注释文字*/,
          },
          data: [
            { value: electrox1.length, name: "冷机" },
            { value: electrox2.length, name: "冷冻泵" },
            { value: electrox3.length, name: "冷却塔" },
            { value: electrox4.length, name: "冷却泵" },
            { value: electrox5.length, name: "热水泵" },
          ],
          color: ["#0BA8EE", "#05C1F1", "#15B6CB", "#5E9FC2", "#A7DDFF"],
        },
        {
          type: "pie",
          radius: [45, 75],
          center: ["75%", "50%"],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            fontSize: "15",
            color: "inherit",
            formatter: `{b}{d}%` /*饼状图触碰之后显示的注释文字*/,
          },
          data: [
            { value: 10, name: "冷机" },
            { value: 10, name: "冷冻泵" },
            { value: 10, name: "冷却塔" },
            { value: 10, name: "冷却泵" },
            { value: 15, name: "热水泵" },
          ],
          color: ["#0BA8EE", "#05C1F1", "#15B6CB", "#5E9FC2", "#A7DDFF"],
        },
      ],
    });
  }
};

// 用电平衡
const getPingHeng = async () => {
  let obj = {
    dataType: "day",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "用电平衡",
    thirdType: "",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let res = await ProjectGroupone(obj);

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];
    let chartDom6 = echarts.init(document.getElementById("six"));
    chartDom6.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "kWh",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      grid: {
        left: "3%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};

// 燃气数据
const getRanQi = async () => {
  let obj = {
    dataType: "day",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "燃气数据",
    thirdType: "",
  };

  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let res = await ProjectGroupone(obj);
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
      data.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    });
    let data1 = [...new Set(data)];

    let chartDom7 = echarts.init(document.getElementById("seven"));
    chartDom7.setOption({
      xAxis: {
        name: "日",
        data: data1,
      },
      yAxis: {
        name: "能耗",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      grid: {
        left: "3%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: electrox1,
          type: "line",
          areaStyle: {
            color: "#f6f7f7",
          },
          color: "#dddddd",
        },
        {
          data: electrox2,
          type: "line",
          areaStyle: {
            color: "#fdf5ce",
            opacity: 0.5,
          },
          color: "#ffc40f",
        },
      ],
    });
  }
};

// 碳排放
const getTanPai = async () => {
  let obj = {
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "碳排放",
    thirdType: "",
  };
  let data = []; //日期
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let res = await ProjectGroupone(obj);

  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // console.log(`${item.day.substring(0, 4)}`)
      data.push(`${item.day.substring(0, 4)}`);
      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      }
    });
    let data1 = [...new Set(data)];
    let chartDom4 = echarts.init(document.getElementById("four"));
    chartDom4.setOption({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "7%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        top: 20,
        right: 40,
        itemHeight: 1,
        itemWidth: 15,
      },
      xAxis: [
        {
          type: "category",
          name: "年",
          data: data1,
        },
      ],
      yAxis: [
        {
          name: "K RMB",
          type: "value",
          axisLine: {
            // x轴线隐藏，但不隐藏背景线
            show: true,
          },
        },
      ],
      series: [
        {
          type: "bar",
          barGap: 0,
          axisLine: { onZero: true },
          data: [
            electrox1[0] / electrox2[0],
            electrox1[1] / electrox2[1],
            electrox1[2] / electrox2[2],
          ],
          color: "#d6ebfa",
        },
        {
          type: "line",
          name: "可比建筑",
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#D90909",
          },
          data: electrox1,
        },
        {
          type: "line",
          name: "本地标准",
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#FFC40F",
          },
          data: electrox2,
        },
      ],
    });
  }
};

// 能用强度
const getQiangDu = async () => {
  let obj = {
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "用能强度",
    thirdType: "",
  };

  let obj1 = {
    indicatorName: "用能强度",
    firstType: "关键指标",
    secondType: "",
    type: "",
    thirdType: "",
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  };

  let shuju = [
    [
      "product",
      "实际能耗",
      "能耗预算",
      "类似建筑",
      "截止昨天前1年能耗",
      "本地强制",
      "本地先进",
    ],
  ]; //数据
  let data = []; //日期
  let data1 = [];
  let electrox1 = []; // 第一条线
  let electrox2 = []; // 第二条线
  let electrox3 = []; // 第二条线
  let electrox4 = []; // 第二条线
  let res = await ProjectGroupone(obj);
  let res1 = await ProjectGroupone(obj1);
  console.log(res, "强度");
  console.log(res1, "强度");
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // console.log(`${item.day.substring(0, 4)}`)
      data.push(`${item.day.substring(0, 4)}`);
      data1 = [...new Set(data)];

      if (item.type == "type1") {
        electrox1.push(item.number1);
      } else if (item.type == "type2") {
        electrox2.push(item.number1);
      } else if (item.type == "type3") {
        electrox3.push(item.number1);
      } else if (item.type == "type4") {
        electrox4.push(item.number1);
      }
    });
    let nian = [electrox1, electrox2, electrox3];
    for (var i = 0; i < data1.length; i++) {
      shuju.push([data1[i], ...nian[i]]);
    }
    let chartDom5 = echarts.init(document.getElementById("five"));
    chartDom5.setOption({
      legend: [
        {
          orient: "vertical",
          right: 20,
          top: "center",
          itemWidth: 15,
          data: ["截止昨天前1年能耗", "实际能耗", "能耗预算", "类似建筑"],
        },
        {
          orient: "vertical",
          right: 75,
          bottom: "30",
          itemWidth: 15,
          itemHeight: 1,
          data: ["本地强制", "本地先进"],
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "30%",
        bottom: "3%",
        containLabel: true,
      },
      dataset: {
        source: shuju,
      },
      xAxis: { type: "category", name: "年" },
      yAxis: {
        name: "RMB/m²",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
      series: [
        { type: "bar", barGap: 0, color: "#F79646" },
        { type: "bar", color: "#d6ebfa" },
        { type: "bar", color: "#0070c0" },
        { type: "bar", color: "#92d050" },
        {
          type: "line",
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#FFC40F",
          },
        },
        {
          type: "line",
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#64cc93",
          },
        },
      ],
    });
  }
};

//监听下拉框数据变化
watch(value,(newValue, oldValue)=>{
  console.log('求和的值变了', '变化后的值是'+newValue, '变化前的值是'+oldValue);
},{immediate:true})
const handleElector = (e) => {
  console.log(e, "Eeeeeeeeeeeeeeee");
};
</script>

<style lang="scss" scoped>
.indBox {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  row-gap: 10px;

  .abxo2 {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
  }
}

:deep(.el-card__body) {
  padding: 0;
}

.box {
  display: flex;

  .flexOne {
    flex: 1;

    .echOne {
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;
    }

    .echCom {
      padding: 0 20px;
      margin: 10px 0;

      p {
        margin: 10px 0;
        font-size: 15px;
        color: #90979e;

        .pFont {
          font-size: 24px;
          color: #7695d1;
          margin: 0 10px 0 20px;
        }

        .ps {
          font-size: 10px;
        }
      }

      .ms {
        display: flex;
        justify-content: space-between;
      }

      .gl {
        margin-top: 35px;

        .end {
          display: flex;
          justify-content: space-between;

          .pt {
            color: #7695d1;
          }
        }
      }
    }

    .tt {
      display: flex;
      justify-content: right;
      align-items: center;

      .el-select {
        margin: 0 10px;
      }
    }
  }

  .flexTwo {
    flex: 1;

    .echOne {
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;
    }

    .two {
      text-align: right;
      margin-top: 10px;
      position: relative;

      .input_t {
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }

    .threeBox {
      flex: 1;
      position: relative;

      .qn {
        position: absolute;
        top: 3%;
        left: 5%;
        color: #b1c2d1;
        font-size: 15px;
      }

      .sy {
        position: absolute;
        top: 3%;
        left: 55%;
        color: #b1c2d1;
        font-size: 15px;
      }
    }
  }
}

.tpf1 {
  flex: 1;
  margin-left: 10px;

  .tf1 {
    font-size: 14px;
    color: #87928f;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    align-items: flex-end;
    padding-bottom: 10px;
    color: #7e7e7e;

    & > div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;

      & > div:first-child {
        color: #101010;
      }

      & > div:last-child {
        font-size: 12px;
      }

      span {
        color: #277bcb;
        font-size: 18px;
      }
    }
  }
}

.tpf {
  display: flex;

  .tpf2 {
    flex: 2;
  }
}

.box_two {
  margin-top: 18px;

  .echOne {
    padding: 15px 20px;
    font-size: 20px;
    color: #6d83b7;
    font-weight: 600;
    border-bottom: 3px solid #f3f5f9;
  }

  .zz {
    display: flex;

    .a {
      font-size: 15px;
    }

    .b {
      flex: 2;

      .c {
        text-align: right;
        margin-top: 10px;

        .el-select {
          margin: 0 10px;
        }
      }
    }
  }
}

.asss {
  width: 33%;
  padding: 0 50px 30px;
}

.end_font {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 14px;
  color: #7e7e7e;

  div:first-child {
    justify-content: flex-end !important;
  }

  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;

    div:first-child {
      flex: 1;
    }

    div:last-child {
      flex: 0.9;
    }

    .spanOne {
      color: #277bcb;
      font-size: 18px;
    }
  }
}
</style>
